<template>
    <div ref="scrollTableRef" class="scroll-table" :class="[`is-scroll-${scrollStatus}`]" :style="{ height }" @scroll="onScroll">
        <table cellspacing="0">
            <colgroup>
                <col v-for="(item, index) in columns" :key="index" :style="{
                    width: itemWidth(item, columns),
                    minWidth: item.minWidth || '98px',
                    maxWidth: item.maxWidth
                }" />
            </colgroup>
            <thead ref="theadRef">
                <tr>
                    <th v-for="(item, index) in columns" :key="index" :class="[item.fixed && `th-fixed-${item.fixed}`]"
                        :style="thStyle">
                        {{ item.title }}
                    </th>
                </tr>
            </thead>
            <tbody ref="tbodyRef">
                <tr v-for="(row, index) in tableData" :key="index">
                    <td v-for="(cItem, cIndex) in columns" :key="cIndex"
                        :class="[cItem.fixed && `td-fixed-${cItem.fixed}`]">
                        <slot :name="cItem.key" v-bind="{ row, index }">
                            {{ row[cItem.key] }}
                        </slot>
                    </td>
                </tr>
            </tbody>
            <tbody v-if="allowRoll">
                <tr v-for="(row, index) in tableData" :key="index">
                    <td v-for="(cItem, cIndex) in columns" :key="cIndex"
                        :class="[cItem.fixed && `td-fixed-${cItem.fixed}`]">
                        <slot :name="cItem.key" v-bind="{ row, index }">
                            {{ row[cItem.key] }}
                        </slot>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="no-data" v-if="tableData.length === 0" style="height: calc(100% - 40px)">暂无数据</div>
    </div>
</template>

<script>
export default {
    props: {
        height: {
            type: [String, Number],
            default: '300px'
        },
        thStyle: {
            type: Object,
            default: () => ({})
        },
        columns: {
            type: Array,
            default: () => []
        },
        tableData: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            scrollStatus: '',
            allowRoll: false,
            lock: false
        }
    },
    computed: {

    },
    methods: {
        comStyle (item) {
            return {
                width: '100%',
                ...item.comStyle
            }
        },
        onScroll (e) {
            const { scrollLeft, scrollWidth, clientWidth } = e.target
            const distance = scrollWidth - clientWidth
            if (scrollLeft === distance) {
                this.scrollStatus = 'right'
            } else {
                this.scrollStatus = 'middle'
            }
        },
        // 设置元素宽度
        itemWidth (item, list) {
            if (item.width) return `${item.width}px`
            const allNum = list.length
            const hasWidthItems = list.filter(l => !!l.width)
            const noWidthItems = allNum - hasWidthItems.length
            const knowWidth = hasWidthItems.reduce((p, n) => {
                return p + n.width
            }, 0)
            return `calc((100% - ${knowWidth}px)/${noWidthItems})`
        },
        doitScrollTop () {
            const that = this
            const boxEl = this.$refs.scrollTableRef
            const headEl = this.$refs.theadRef
            console.log({headEl})
            const bodyEl = this.$refs.tbodyRef
            this.allowRoll = bodyEl.offsetHeight >= boxEl.offsetHeight
            if (!this.allowRoll) return
            function move () {
                if (that.lock) return
                if (boxEl.scrollTop >= bodyEl.offsetHeight) {
                    boxEl.scrollTop = 0
                } else {
                    boxEl.scrollTop += 0.5
                }
                requestAnimationFrame(move)
            }
            move()
            boxEl.onmouseenter = function () {
                that.lock = true
            }
            boxEl.onmouseleave = function () {
                that.lock = false
                move()
            }
        }
    },
    mounted () {
        this.doitScrollTop()
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
